// 新的实现方式 - 使用createApp创建组件实例
import { createApp } from 'vue';
import BlogMessage from './BlogMessage.vue';
import { useUserStore } from '@/store/user'; // 引入Pinia store
import { createRouter, createWebHistory } from 'vue-router'; // 如果需要单独的router实例

// 创建一个新的应用实例并挂载组件
function createBlogMessageInstance(props = {}) {
  // 创建一个新的应用实例
  const app = createApp(BlogMessage, {
    // 传递props
    ...props,
    // 提供关闭方法
    onClose: () => {
      instance.unmount();
      container.remove();
    }
  });

  // 创建一个容器元素
  const container = document.createElement('div');
  document.body.appendChild(container);

  // 安装Pinia
  const userStore = useUserStore();
  app.use(userStore.$pinia);

  // 如果需要，可以创建一个单独的router实例
  // const router = createRouter({
  //   history: createWebHistory(),
  //   routes: []
  // });
  // app.use(router);

  // 挂载应用
  const instance = app.mount(container);

  return instance;
}

// 消息框管理器
function AModal() {
  let lastInstance = null;

  return function(obj) {
    const userStore = useUserStore();
    
    // 关闭之前的消息框
    if (lastInstance) {
      lastInstance.close?.();
      lastInstance = null;
      userStore.SET_LASTNETMESSAGECOM(null);
    }

    if (!obj) return;

    // 创建新的消息框实例
    const instance = createBlogMessageInstance({
      msg: obj.msg,
      title: obj.title,
      url: obj.url,
      event: obj.event,
      logUnid: obj.logUnid,
      gxjlunid: obj.gxjlunid
    });

    // 存储实例引用
    lastInstance = instance;
    userStore.SET_LASTNETMESSAGECOM(instance);

    return instance;
  };
}

// 创建单例
const showBlogMessage = AModal();
export default showBlogMessage;